//用卡数据上传 
<template>
  <div class="cards-container page-container">
    <el-scrollbar class="scroll-container">
      <div class="scroll-inner-container">
        <!-- 工具栏 -->
        <div class="head-container">
          <!-- 搜索 -->
          <el-form
            :inline="true"
            label-position="right"
            label-width="74px"
            size="small"
            :model="searchQuery"
            class="demo-form-inline"
          >
            <el-form-item label="用卡时间">
              <el-date-picker
                class="search-btn"
                size="small"
                v-model="time"
                @change="changeDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="success" @click="search">查询</el-button>
              <el-button size="small" @click="reloadSearch">重置</el-button>
              <el-button size="small" type="success" @click="uploadData" style="margin:0 50px;">上传</el-button>
            </el-form-item>
            <el-form-item>
              <el-link
                type="success"
                v-if="noUploadTime!=''"
                title="点击查询最早未上传时间段数据"
                @click.stop="searchNoUploadTime"
              >最早未上传时间：{{noUploadTime}}</el-link>
            </el-form-item>
          </el-form>
        </div>
        <!-- 表格渲染 -->
        <el-table
          header-row-class-name="table-header-style"
          :row-class-name="tableRowStyle"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadingText"
        >
          <el-table-column prop="orgName" label="机构名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ehealthCardId" label="健康卡ID" show-overflow-tooltip></el-table-column>
          <el-table-column prop="medstepName" label="诊疗环节" show-overflow-tooltip></el-table-column>
          <el-table-column prop="departMentName" label="科室" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.departMentName | departMentName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="channelName" label="用卡终端" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="用卡时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.createTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isFlag" label="上传状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span
                :class="uploadStateClassName(scope.row.isFlag)"
              >{{scope.row.isFlag | uploadState}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
    <!-- 分页器 -->
    <!-- 分页 -->
    <TablePagination
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @changeSize="changeSize"
      @changePage="changePage"
      class="table-pagination"
    />
  </div>
</template>
<script>
import {
  setSearchValue,
  findName,
  getTimeRangeHour,
  notify
} from "@/utils/index";
import initData from "@/mixins/req";
import { noUploadTimeStr, uploadCardsData } from "@/api/uploadCards";
import store from "@/store";
export default {
  name: "cards",
  mixins: [initData],
  data() {
    return {
      searchQuery: {
        startTime: "", // 开始时间
        endTime: "" //结束时间
      },
      loadingText: "",
      noUploadTime: ""
    };
  },
  created() {
    this.getEarliest();
    this.setDefaultValue();
    this.init();
  },
  methods: {
    setLoading(show, showText) {
      this.loading = show;
      this.loadingText = showText;
    },
    uploadStateClassName(val) {
      switch (val) {
        case 0:
          return "uploadState_success";
          break;
        case 1:
          return "uploadState_no";
          break;
        case 2:
          return "uploadState_fail";
          break;
        default:
          return "niini";
      }
    },
    //获取最早的未上传的时间
    getEarliest() {
      return new Promise((resolve, reject) => {
        noUploadTimeStr().then(res => {
          this.noUploadTime = res.code === 10000 ? res.result : "";
          if (res.code === 10000) resolve();
          else reject();
        });
      });
    },
    //跳转到最早的未上传的时间段
    searchNoUploadTime() {
      this.setDefaultValue([this.noUploadTime, this.noUploadTime]);
      this.init();
    },
    search() {
      this.init();
    },
    reloadSearch() {
      setSearchValue(this, this.searchQuery);
      this.setDefaultValue();
      this.init();
    },
    beforeInit() {
      this.url = store.getters["api/cardsUploadList"];
      this.searchParams = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchQuery
      };
      return true;
    },
    //上传数据
    uploadData() {
      let time = store.getters["parameter/uploadDataTime"];
      if (
        getTimeRangeHour(this.searchQuery.startTime, this.searchQuery.endTime) >
        time
      ) {
        notify("上传时间段不能大于" + time + "小时", "error", "失败");
        return false;
      }
      this.$confirm("确定上传该时间段的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success"
      })
        .then(() => {
          this.setLoading(true, "正在上传...");
          uploadCardsData(this.searchQuery)
            .then(res => {
              this.setLoading(false, "");
              if (res.code === 10000) {
                notify("上传成功", "success", "成功");
                this.getEarliest().then(res => {
                  // this.searchNoUploadTime();
                  this.init();
                });
              } else {
                notify(res.message, "error", "失败");
              }
            })
            .catch(err => {
              this.setLoading(false, "");
            });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  filters: {
    departMentName(val) {
      return !val || val == -1 ? "未知" : val;
    },
    uploadState(val) {
      return val || val === 0
        ? findName(store.getters["parameter/uploadState"], val)
        : "---";
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/page.scss";
@import "~@/assets/styles/table.scss";
.uploadState_success {
  color: #85ce61;
}
.uploadState_fail {
  color: #ff0000;
}
</style>
